<template>
    <div class="pdf">
            <!-- :title="'pdf预览'" -->
        <!-- :src="`/web/viewer.html?file=${encodeURIComponent(`${pdfUrl}`)}`" -->
        <j-modal
            v-drag-modal
            class="pdfBox"
            :visible="visible"
            :width="700"
            :maskClosable="false"
            :switchFullscreen="switchFullscreen"
            @cancel="handleCancel"
            :footer="null">
            <!-- +this.$route.query.cxj_mc_zw+this.$route.query.cxj_xmbh -->
            
            <template slot="title">
                <div>
                    <span>pdf预览</span>
                    <span style="width:20px;display:inline-block;"></span>
                    <span>{{this.$route.query.cxj_mc_zw}}</span>
                    <span style="width:20px;display:inline-block;"></span>
                    <span>{{this.$route.query.cxj_xmbh}}</span>
                </div>
            </template>
            <iframe
                :src="`/web/viewer.html?file=${pdfUrl}`"
                frameborder="0"
                class="pdf-window"
            >
            </iframe>
        </j-modal>
    </div>
</template>

<script>
import {
    fileDownload
} from '@/api/shenbao';
export default {
    data(){
        return {
            // baseUrl: process.env.BASE_URL,
            path: '',
            pdfUrl: "",
            visible: false,
            switchFullscreen: true,
        }
    },
    props: ['cxj_cxj_id','filePath', "showPdf"],
    watch: {
        showPdf(next, prev) {
            if (next != prev) {
                var self = this;
                self.visible = !self.visible;
                fileDownload({
                    cxj_cxj_id: this.cxj_cxj_id,
                    path: this.filePath
                }).then(res=>{
                    console.log(res.data, 'res')
                    this.pdfUrl = this.getObjectURL(res.data);
                    console.log(this.pdfUrl, 'this.pdfUrl')
                })
            }
        }
    },
    methods: {
        handleCancel(){
            this.visible = false;
        },
        getObjectURL(file) {
            let url = null
            if (window.createObjectURL !== undefined) { // basic
                url = window.createObjectURL(file)
            } else if (window.webkitURL !== undefined) { // webkit or chrome
                try {
                    url = window.webkitURL.createObjectURL(file)
                } catch (error) {
                    // console.log(error)
                }
            } else if (window.URL !== undefined) { // mozilla(firefox)
                try {
                    url = window.URL.createObjectURL(file)
                } catch (error) {
                    // console.log(error)
                }
            }
            return url;
        }
    },
    mounted(){
        // fileDownload({
        //     cxj_cxj_id: this.cxj_cxj_id,
        //     path: this.filePath
        // }).then(res=>{
        //     console.log(res.data, 'res')
        //     this.pdfUrl = this.getObjectURL(res.data);
        //     console.log(this.pdfUrl, 'this.pdfUrl')
        // })
    }
}
</script>
<style lang='less'>
    .pdfBox {
        &.fullscreen  {
            .ant-modal {
                width: 100%!important;
                top: 0!important;
                height: 100%!important;
                .ant-modal-content {
                    max-height: 100%!important;
                    height: 100%!important;
                    .ant-modal-body {
                        margin-top: 0;
                    }
                }
            }
        }
        .ant-modal {
            width: 1200px!important;
            // top: 30px!important;
            height: 700px!important;
            .ant-modal-content {
                max-height: 700px!important;
                height: 700px!important;
                .ant-modal-body {
                    margin-top: 30px;
                }
            }
        }
    }
</style>
<style scoped>
.pdf {
    width: 90%;
    height: 90%;
}
iframe {
    width: 100%;
    height: 100%;
}
</style>